<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        #div1 {
            width: 1000px;
            margin: 0 auto;
        }
        
        #div1 input {
            width: 100px;
            height: 30px;
            background: #CCC;
        }
        
        #div1 .active {
            background: skyblue;
        }
        
        #div1 div {
            width: 200px;
            height: 200px;
            background: #CCC;
            display: none;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
        window.onload = function() {
            var oTab = new TabSwitch("div1");
        }

        function TabSwitch(id) {
            console.log(this);
            var oDiv = document.getElementById(id);
            this.aBtn = oDiv.getElementsByTagName('input');
            this.aDiv = oDiv.getElementsByTagName('div');
            var i = 0;
            var _this = this;
            console.log(_this);
            for (i = 0; i < this.aBtn.length; i++) {
                this.aBtn[i].index = i;
                this.aBtn[i].onclick = function() {
                    _this.tab(this);
                };
            }
        };
        TabSwitch.prototype.tab = function(a) {
            for (i = 0; i < this.aBtn.length; i++) {
                this.aBtn[i].className = '';
                this.aDiv[i].style.display = 'none';
            }
            a.className = 'active';
            this.aDiv[a.index].style.display = 'block';
        }
    </script>
</head>

<body>
    <div id="div1">
        <input class="active" type="button" value="导航一" />
        <input type="button" value="导航2" />
        <input type="button" value="导航3" />
        <div style="display:block;"><img src="./image/1.jpg"></div>
        <div> <img src="./image/2.jpg"></div>
        <div><img src="./image/3.jpg"></div>
    </div>
</body>

</html>